<template>
  <div class="login-form">
    <el-row>
      <el-col :span="6" :offset="9">
        <el-form :rules="rules" :model="loginUser" ref="loginForm">
          <el-form-item label="用户名" prop="devCode">
            <el-input v-model="loginUser.devCode"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="devPassword">
            <el-input
              type="password"
              v-model="loginUser.devPassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { setLoginFlag } from "@/util/auth";
import { login } from "@/api/auth";
export default {
  name: "Login.vue",
  data() {
    return {
      // 用户输入的登录信息
      loginUser: {
        devCode: "",
        devPassword: "",
      },
      // 表单的校验规则
      rules: {
        devCode: [
          { required: true, message: "用户编码不能为空！", trigger: "blur" },
          {
            min: 2,
            message: "用户编码的长度应该在2个字符以上！",
            trigger: "blur",
          },
        ],
        devPassword: [
          { required: true, message: "密码不能为空！", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码的长度应该在6-20个字符之间！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      // 调用表单组件的验证方法，对输入的数据进行检查
      this.$refs.loginForm.validate().then(() => {
        console.log("表单验证通过！");
        login(this.loginUser).then((data) => {
          console.log("经过拦截器处理之后的响应数据：",data)
          console.log("登录成功，并保存登录成功的标记到cookie！");
          setLoginFlag();
          console.log("跳到首页");
          this.$router.push("/");
        });
      });
    },
    resetForm() {
      this.$refs["loginForm"].resetFields();
    },
  },
};
</script>

<style scoped>
.login-form {
}
</style>
